<template>
	<view>

		<u-navbar :is-back="false" height="60" title="" :is-fixed="false">
			<view class="slot-wrap">
				<view class="logo">
					<u-image :width="logoStyle.width" :height="logoStyle.height" :src="src" :fade="false"></u-image>
				</view>
				<view class="search">
					<u-search placeholder="在麻辣社区中搜索" :show-action="false" shape="square"></u-search>
				</view>
				<view class="tools">
					<u-icon name="account" color="#444" size="40"></u-icon>
					<u-icon name="chat" color="#444" size="40"></u-icon>
					<u-icon name="list" color="#444" size="40"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" :active-color="activeColor" :bold="true" font-size="34" height="90" @change="changeTab"
			 :current="tabid"></u-tabs>
		</u-sticky>
		<view v-if="error==1">
			<view style="text-align: center;margin-top:50%;color:#999;font-size:14px;"><text>服务器异常</text></view>
		</view>
		<view v-else>
			<view v-if="indexPostData.Listdata">
				<view class="banner" v-if="!tabid">
					<u-swiper :list="indexPostData.ListBanner" name="imgurl" :title="true" :effect3d="true" :height="350"></u-swiper>
				</view>
				<view class="scroll-v list" enableBackToTop="true" scroll-y loadmoreoffset="15">
					<view v-for="(threadlist,k) in indexPostData.Listdata">
						<newsItem :options="threadlist"></newsItem>
					</view>
					<u-loadmore :status="loadstatus" style="padding:30rpx 0;" />

				</view>
			</view>
			<view v-else style="text-align: center;margin-top:50%;">
				<u-loading size="60" color="#2979ff"></u-loading>
			</view>
		</view>
		<u-no-network tips="没有网络啊啊"></u-no-network>
	</view>

</template>

<script>
	import indexBar from '@/static/common/indexbar';
	import newsItem from './newsItem.vue';
	export default {
		components: {
			newsItem
		},
		data() {
			return {
				loadstatus: 'loadmore',
				tabid: 0,
				newsList: [],
				navbarHeight: 90,
				src: "../../static/common/newlogo.png",
				logoStyle: {
					height: "74",
					width: "81"
				},
				tab: [],
				morelock: 0,
				offset: 0,
				error: 0,
				indexPostData: [],
				activeColor: "#820202",
				list: indexBar.navlist
			}
		},
		onReachBottom() {
			if (this.morelock == 1) return false;
			this.morelock = 1;
			this.loadstatus = 'loading';
			this.offset = this.offset + 30;
			this.getData(this.list[this.tabid].id, this.offset, 1)
		},
		onLoad() {
			this.getData(this.list[this.tabid].id, 0, 0)
		},

		methods: {
			changeTab(index) {
				this.tabid = index;
				this.indexPostData = [];
				this.morelock = 0;
				this.getData(this.list[this.tabid].id, 0, 0)
			},

			getData(fid, offset, showpos) {
				fid = fid > 0 ? fid : 99999;
				let Newdata = []
				this.$u.http.setConfig({
					showLoading: false,
				})
				this.$u.post('plugin.php?id=qianfan:index&controller=forum&from_newapp=mala', {
					action: "getthreads",
					fid: fid,
					limit: 30,
					showpos: showpos,
					ordertype: 0,
					offset: this.offset + 1
				}).then(res => {
					this.morelock = 0;
					if (offset > 0) {
						if(res.threadlist && res.threadlist.length>0){
							Newdata.Listdata = this.indexPostData.Listdata.concat(res.threadlist);
							Newdata.ListBanner = this.indexPostData.ListBanner;
							this.indexPostData = Newdata;
						}else{
							this.morelock = 1;
							this.loadstatus="nomore"
						}
						
					} else {
						Newdata.Listdata = res.threadlist;
						Newdata.ListBanner = res.banner;
						this.indexPostData = Newdata;
					}

				}).catch(res => {
					// this.error = 1;
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
	}
	.list {
		background-color: #fff;
		margin-top: 15rpx;
	}

	.banner {
		margin: 20rpx 0;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		width:100%;
	}

	.slot-wrap .logo {
		width: 100rpx;
	}
	.slot-wrap .search {
		width: calc(100% - 162rpx);
		margin:0 20rpx;

	}
	.slot-wrap .tools{
		width:132rpx;
		display: flex;
		justify-content: space-around;
	}
	.slot-wrap .tools .u-icon{
		margin-left:10rpx;
	}
	.slot-wrap .tools .u-icon:first-child{
		margin-left:0;
	}
</style>
